extends /default.pug

block view
  .animated.fadeIn
    .card
      .card-header
        | Progress
        .card-header-actions
          a.card-header-action(href='http://coreui.io/docs/components/bootstrap-popover/popovers.html', target='_blank')
            small.text-muted docs
      .card-body
        .progress.mb-3
          .progress-bar(role='progressbar', aria-valuenow='0', aria-valuemin='0', aria-valuemax='100')
        .progress.mb-3
          .progress-bar(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
        .progress.mb-3
          .progress-bar(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100')
        .progress.mb-3
          .progress-bar(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        .progress.mb-3
          .progress-bar(role='progressbar', style='width: 100%', aria-valuenow='100', aria-valuemin='0', aria-valuemax='100')
    .card
      .card-header
        | Progress
        small labels
      .card-body
        .progress.mb-3
          .progress-bar(role='progressbar', style='width: 25%;', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
            | 25%
        .progress
          .progress-bar(role='progressbar', style='width: 75%;', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
            | 75%
    .card
      .card-header
        | Progress
        small height
      .card-body
        .progress.mb-3(style='height: 3px;')
          .progress-bar(role='progressbar', style='width: 25%;', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
        .progress(style='height: 30px;')
          .progress-bar(role='progressbar', style='width: 25%;', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
    .card
      .card-header
        | Progress
        small backgrounds
      .card-body
        .progress.mb-3
          .progress-bar.bg-success(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
        .progress.mb-3
          .progress-bar.bg-info(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100')
        .progress.mb-3
          .progress-bar.bg-warning(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        .progress
          .progress-bar.bg-danger(role='progressbar', style='width: 100%', aria-valuenow='100', aria-valuemin='0', aria-valuemax='100')
    .card
      .card-header
        | Progress 
        small multiple bars
      .card-body
        .progress
          .progress-bar(role='progressbar', style='width: 15%', aria-valuenow='15', aria-valuemin='0', aria-valuemax='100')
          .progress-bar.bg-success(role='progressbar', style='width: 30%', aria-valuenow='30', aria-valuemin='0', aria-valuemax='100')
          .progress-bar.bg-danger(role='progressbar', style='width: 20%', aria-valuenow='20', aria-valuemin='0', aria-valuemax='100')
    .card
      .card-header
        | Progress 
        small striped
      .card-body
        .progress.mb-3
          .progress-bar.progress-bar-striped(role='progressbar', style='width: 10%', aria-valuenow='10', aria-valuemin='0', aria-valuemax='100')
        .progress.mb-3
          .progress-bar.progress-bar-striped.bg-success(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
        .progress.mb-3
          .progress-bar.progress-bar-striped.bg-info(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100')
        .progress.mb-3
          .progress-bar.progress-bar-striped.bg-warning(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
        .progress.mb-3
          .progress-bar.progress-bar-striped.bg-danger(role='progressbar', style='width: 100%', aria-valuenow='100', aria-valuemin='0', aria-valuemax='100')
    .card
      .card-header
        | Progress 
        small animated
      .card-body
        .progress
          .progress-bar.progress-bar-striped.progress-bar-animated(role='progressbar', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100', style='width: 75%')
